<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--====== Favicon Icon ======-->
    <link rel="shortcut icon" href="assets/images/favicon.png" type="image/png">
    <!--====== Magnific Popup CSS ======-->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!--====== Slick CSS ======-->
    <link rel="stylesheet" href="assets/css/slick.css">
    <!--====== Line Icons CSS ======-->
    <link rel="stylesheet" href="assets/css/LineIcons.css">
    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!--====== Default CSS ======-->
    <link rel="stylesheet" href="assets/css/default.css">
    <!--====== Style CSS ======-->
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- 导入页眉 -->
<div class="header"></div>

<!--====== 首页导航轮播图 开始 ======-->
<section id="home" class="slider_area">
    <div id="carouselThree" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselThree" data-slide-to="0" class="active"></li>
            <li data-target="#carouselThree" data-slide-to="1"></li>
            <li data-target="#carouselThree" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="slider-content">
                                <h1 class="title">兰州拉面博客 Lanzhou Ramen Blog</h1>
                                <p class="text">在探索中前进，打造属于个人的完美私人博客.</p>
                                <ul class="slider-btn rounded-buttons">
                                    <li><a class="main-btn rounded-one" href="blog.html">来吧小哥哥</a></li>
                                    <!--<li><a class="main-btn rounded-two" href="#">商务洽谈</a></li>-->
                                </ul>
                            </div>
                        </div>
                    </div> <!-- row -->
                </div> <!-- container -->
                <div class="slider-image-box d-none d-lg-flex align-items-end">
                    <div class="slider-image">
                        <img src="assets/images/slider/1.png" alt="Hero">
                    </div> <!-- slider-imgae -->
                </div> <!-- slider-imgae box -->
            </div> <!-- carousel-item -->

            <div class="carousel-item">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="slider-content">
                                <h1 class="title">兰州拉面6人项目组 </h1>
                                <p class="text">组长：盒子亮。组员：石Bug朋，李Test辉，陈Sql源，罗Vue森，陈炜健</p>
                                <ul class="slider-btn rounded-buttons">
                                    <li><a class="main-btn rounded-one" href="blog.html">点击进入</a></li>
                                    <!--<li><a class="main-btn rounded-two" href="#">DOWNLOAD</a></li>-->
                                </ul>
                            </div> <!-- slider-content -->
                        </div>
                    </div> <!-- row -->
                </div> <!-- container -->
                <div class="slider-image-box d-none d-lg-flex align-items-end">
                    <div class="slider-image">
                        <img src="assets/images/slider/2.png" alt="Hero">
                    </div> <!-- slider-imgae -->
                </div> <!-- slider-imgae box -->
            </div> <!-- carousel-item -->

            <div class="carousel-item">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="slider-content">
                                <h1 class="title">项目组织架构</h1>
                                <p class="text">项目经理+架构师：盒子亮。研发总监：罗Vue森。后端开发：石Bug朋，陈Sql源，陈炜健。测试：李Test辉。</p>
                                <ul class="slider-btn rounded-buttons">
                                    <li><a class="main-btn rounded-one" href="blog.html">进入主页</a></li>
                                    <!--<li><a class="main-btn rounded-two" href="#">DOWNLOAD</a></li>-->
                                </ul>
                            </div> <!-- slider-content -->
                        </div>
                    </div> <!-- row -->
                </div> <!-- container -->
                <div class="slider-image-box d-none d-lg-flex align-items-end">
                    <div class="slider-image">
                        <img src="assets/images/slider/3.png" alt="Hero">
                    </div> <!-- slider-imgae -->
                </div> <!-- slider-imgae box -->
            </div> <!-- carousel-item -->
        </div>

        <a class="carousel-control-prev" href="#carouselThree" role="button" data-slide="prev">
            <i class="lni lni-arrow-left"></i>
        </a>
        <a class="carousel-control-next" href="#carouselThree" role="button" data-slide="next">
            <i class="lni lni-arrow-right"></i>
        </a>
    </div>
    <div style="position: fixed;right: 0px;bottom: 0px;float: right;z-index: 9999;width: 300px;">
        <div class="accordion" id="accordionExample">
            <div class="card" v-for="notification in notificationList">
                <div class="card-header" id="headingOne">
                    <h2 class="mb-0">
                        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
                                aria-expanded="true" aria-controls="collapseOne"
                                @click="toggleStyleChange(notification.notificationId)" :test="'tr-'+notification.notificationId">
                            系统通知
                        </button>
                    </h2>
                </div>

                <div :id="'tr-'+notification.notificationId" class="collapse.show" aria-labelledby="headingOne"
                     data-parent="#accordionExample">
                    <div class="card-body">
                        {{notification.notificationContent}}
                    </div>
                </div>
            </div>
            <!--<div class="card">
                <div class="card-header" id="headingTwo">
                    <h2 class="mb-0" >
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" onclick="toggleStyleChange2()">
                            系统通知&nbsp;&nbsp;2
                        </button>
                    </h2>
                </div>
                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                    <div class="card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>-->
        </div>
    </div>
</section>
<!--====== 首页导航轮播图 结束 ======-->


<!-- 导入页脚 -->
<div class="footer"></div>
<!--导入所有js文件-->
<!--====== Jquery js ======-->
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>
<!--====== Bootstrap js ======-->
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!--====== Slick js ======-->
<script src="assets/js/slick.min.js"></script>
<!--====== Magnific Popup js ======-->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!--====== Ajax Contact js ======-->
<script src="assets/js/ajax-contact.js"></script>
<!--====== Isotope js ======-->
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<!--====== Scrolling Nav js ======-->
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/js/scrolling-nav.js"></script>
<!--====== Main js ======-->
<script src="assets/js/main.js"></script>
<!--导入vue 包-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--导入工具类-->
<script src="assets/js/util/HttpUtil.js"></script>
</body>
</html>
<script type="text/javascript">
    //在js中引入页眉页脚
    $(document).ready(function () {
        $('.header').load('header.html');
        $('.footer').load('footer.html');
    });

    //系统通知点击展开功能


    //获取发布通知信息
    let vm = new Vue({
        el: '#accordionExample',
        data: {
            notificationList: []
        },
        methods: {
            changeNotificationList: function () {
                //获取notification,状态为1的通知
                //发起http请求后台获取商家列表数据
                let url = "notificationPublic.do";
                let thisObj = this;
                doGet(url, function (data) {
                    thisObj.notificationList = data;
                    console.log(data);
                })
            },
            toggleStyleChange: function (id) {
                console.log(id)
                /*let that = e.target;

                /*let id = $(that).attr("test");*/
                $("#tr-"+id).toggle();

            }
        },
        mounted: function () {
            //页面加载完成，并且vue对象加载完成之后调用
            this.changeNotificationList();
        },
        created: function () {
            console.log("created");
        }
    });
</script>